<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
		<title>送给自己的另一半</title>
	</head>

	<script src="js/lib/jquery.min.js" type="text/javascript"></script>
	<script src="js/lib/jquery.fireworks.js" type="text/javascript"></script>

	<style type="text/css">
		* {
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
		
		html {
			width: 100%;
			height: 100%;
		}
		
		body {
			max-width: 600px;
			margin: 0 auto;
			background: #0b3443;
			color: #f0f0f0;
		}
		
		.share_img {
			width: 0;
			height: 0;
			overflow: hidden;
			opacity: 0;
		}
		
		.content {
			padding: 80px 20px;
		}
		
		.text_wrapper {
			display: -webkit-box;
			display: flex;
		}
		
		.text_wrapper .text {
			padding-top: 20px;
			padding-left: 20px;
		}
		
		.hide {
			display: none !important;
		}
		
		p {
			margin: 0;
		}
		
		.btn-groups {
			padding-right: 20px;
			text-align: center;
		}
		
		.heart-btn {
			display: inline-block;
			animation: breath 0.8s linear 0s infinite both;
			-webkit-animation: breath 0.8s linear 0s infinite both;
		}
		
		.btn {
			position: relative;
			display: inline-block;
			width: 60px;
			height: 60px;
			margin: 0 30px;
			transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
		}
		
		.btn span {
			display: block;
			width: 100%;
			height: 100%;
			line-height: 60px;
			margin-top: -10px;
			margin-left: -10px;
			text-align: center;
			transform: rotate(-45deg);
			-webkit-transform: rotate(-45deg);
		}
		
		.btn-a {
			background: #d26ae5;
		}
		
		.btn-b {
			background: #c9c9c9;
		}
		
		.btn-a:before {
			content: '';
			position: absolute;
			display: block;
			width: 30px;
			height: 60px;
			background: #d26ae5;
			left: -29px;
			top: 0;
			border-top-left-radius: 60px;
			border-bottom-left-radius: 60px;
		}
		
		.btn-a:after {
			content: '';
			position: absolute;
			display: block;
			width: 60px;
			height: 30px;
			background: #d26ae5;
			left: 0;
			top: -29px;
			border-top-left-radius: 60px;
			border-top-right-radius: 60px;
		}
		
		.btn-b:before {
			content: '';
			position: absolute;
			display: block;
			width: 30px;
			height: 60px;
			background: #c9c9c9;
			left: -29px;
			top: 0;
			border-top-left-radius: 60px;
			border-bottom-left-radius: 60px;
		}
		
		.btn-b:after {
			content: '';
			position: absolute;
			display: block;
			width: 60px;
			height: 30px;
			background: #c9c9c9;
			left: 0;
			top: -29px;
			border-top-left-radius: 60px;
			border-top-right-radius: 60px;
		}
		
		.container {}
		
		.container .mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.3);
		}
		
		.container .modal {
			width: 80%;
			height: 160px;
			position: absolute;
			top: 50%;
			left: 50%;
			padding: 20px 15px;
			border-radius: 5px;
			transform: translate(-50%, -70%);
			-webkit-transform: translate(-50%，-70%);
			background: #f3f3f3;
		}
		
		.container .modal p {
			margin-top: 20px;
			margin-bottom: 20px;
			font-size: 16px;
			color: #353535;
			text-align: center;
		}
		
		.confirm {
			display: block;
			width: 120px;
			height: 40px;
			margin: 0 auto;
			border: none;
			font-size: 16px;
			border-radius: 5px;
			color: #ffffff;
			background: #f45cae;
		}
		
		.type_words {
			padding: 12px 20px;
		}
		
		@keyframes breath {
			0% {
				transform: scale3d(1, 1, 1);
				-webkit-transform: scale3d(1, 1, 1);
				transform-origin: 50% 50%;
			}
			50% {
				transform: scale3d(1.02, 1.02, 1.02);
				-webkit-transform: scale3d(1.02, 1.02, 1.02);
				transform-origin: 50% 50%;
			}
			100% {
				transform: scale3d(1, 1, 1);
				-webkit-transform: scale3d(1, 1, 1);
				transform-origin: 50% 50%;
			}
		}
	</style>

	<script type="text/javascript">
		$(function() {
			$('#yes').click(function(event) {
				modal('我就知道您一定会愿意的。(^_^)', function() {
					$('.page_one').addClass('hide');
					$('.page_two').removeClass('hide');
					// typeWrite();
					fireworks();

				});
			});
			$('#no').click(function(event) {
				modal('明人不说暗话！', A);
			});
		});

		function A() {
			modal('I  LOVE  YOU！', B);
		}

		function B() {
			modal('我知道你在等我这一句话', C);
		}

		function C() {
			modal('请您不要拒绝我好不好！', D);
		}

		function D() {
			modal('拒绝我，不存在的', E);
		}

		function E() {
			modal('这辈子都不可能让你离开我', F);
		}

		function F() {
			modal('跟我走吧', G);
		}

		function G() {
			modal('房产证上写你名', H);
		}

		function H() {
			modal('我会做饭', I);
		}

		function I() {
			modal('爱你。么么哒！', J)
		}

		function J() {
			modal('行，我们去民政局登记吧', function() {
				fireworks();
			});
		}

		function fireworks() {
			$('.page_one').addClass('hide');
			$('.page_two').removeClass('hide');
			$('.page_two').fireworks({
				sound: false,
				opacity: 0.9,
				width: '100%',
				height: '100%'
			});
		}

		function modal(content, callback) {
			var tpl = '<div class="container">' +
				'<div class="mask"></div>' +
				'<div class="modal">' +
				'<p>' + content + '</p>' +
				'<button type="button" id="confirm" class="confirm">确定</button>' +
				'</div>' +
				'</div>';
			$('body').append(tpl);
			$(document).on('click', '.confirm', function() {
				$('.container').remove();
				callback();
			});
		}

		var x = 0;
		var speed = 150;
		var current = 0;

		function typeWrite() {
			$('.type_words').html(myWords.substring(0, x++) + '_');
			var timer = setTimeout("typeWrite()", speed);
			if(x == myWords.length) {
				x = myWords.length;
				clearTimeout(timer)
			}
		}
	</script>

	<body>

		<div class="share_img"><img src="images/a8b.png" alt=""></div>

		<div class="page_one">
			<div class="content">
				<div class="text_wrapper">
					<img src="images/a8.png" alt="">
					<div class="text">
						<P>有人说，人的一生会遇到2920万人，而两个人相爱的概率只有0.000049。 在这茫茫人海中，两个人能相遇就值得感激，能相爱更是一种难得。所以， 我很庆幸上天让我遇见了你。我希望有个如你一般的人，能看完我写过的 所有状态，读完我所有的日志，看完我从小到大的照片，试着听我喜欢的 歌。如果可以，甚至陪我去我喜欢的地方，只想弥补错过你的青春。
						</P>

						<br>你愿意当我永远的伴侣嘛？</br>
					</div>
				</div>
			</div>
			<div class="btn-groups">
				<div class="heart-btn">
					<div id="yes" class="btn btn-a"><span>愿意</span></div>
				</div>
				<div id="no" class="btn btn-b"><span>不愿意</span></div>
			</div>
		</div>
		<div class="page_two hide">
			<div class="type_words"></div>
		</div>

		<div style="text-align:center;margin:150px 0; font:normal 14px/24px 'MicroSoft YaHei';">
		</div>
	</body>

</html>